<include file="Public/header" />
<title></title>
</head>
<style type="text/css">
    .table span{
        display: block;
        float: left;
        margin-right: 12px;;
    }
    .a_table{
        padding-left: 24px;
    }
</style>
<body>
<div class="page-container">
    <form class="form form-horizontal" id="form-article-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>角色名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder=""  name="name">
            </div>
        </div>
        <div class="row cl a_table">
           <volist name="list" id="list">
			<table class="table table-border table-bg table-bordered" >
			  <thead>
				<tr><th colspan="2"><input <if condition="$list.checked eq 1" >checked</if> class="one_check" value="<{$list.id}>" type="checkbox" /><{$list.name}></th></tr>
			  </thead>
			  <volist name="list.child" id="child">
				  <tbody>
					<tr class="active"><td colspan="2" style="background:#fff;padding-left:25px;">
					<input <if condition="$child.checked eq 1" >checked</if> class="two_check" value="<{$child.id}>" type="checkbox" /><{$child.name}></td></tr>
					<volist name="child.child" id="childs">
						<tr class="">
						<td class="paddingl20" width="20%" style="padding-left:40px;">
						<input <if condition="$childs.checked eq 1" >checked</if> class="three_check" value="<{$childs.id}>" type="checkbox" /><{$childs.name}></td>
						<td>
						<foreach name="childs.child" item="child_last" >
							<input <if condition="$child_last.checked eq 1" >checked</if> class="four_check" value="<{$child_last.id}>" type="checkbox" /><{$child_last.name}>
						</foreach>
						</td>
						</tr>
					</volist>
				  </tbody>
			  </volist>
			</table>
		</volist>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <button onClick="save()" class="btn btn-secondary radius" type="button"><i class="Hui-iconfont">&#xe632;</i> 保存</button>
                <button onClick="cancel()" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</div>
<include file="Public/footer_js" />
<script>
    function save(){
        var group_id='';
        var table=$('.table');
		for(var j=0;j<table.length;j++){
			for(var i=0;i<table.eq(j).find('input:checked').length;i++){
				group_id+=','+table.eq(j).find('input:checked').eq(i).val();
			}
		}
        if($("input[name=name]").val()==''){
            layer.msg('角色名称不能为空');
            return false;
        }
        if($("input[name=name]").val().length<2 || $("input[name=name]").val().length>24){
            layer.msg('角色名称长度范围为2-24');
            return false;
        }
        if(group_id==''){
            layer.msg('请添加权限');
            return false;
        }
        $.post('__CONTROLLER__/department_addD',{
            name:$("input[name=name]").val(),
            group_id:group_id.substring(1),
        },function (msg){
            layer.msg(msg.data);
            if(msg.flag==1){
                setTimeout(function (){
                    parent.location.reload();
                    parent.layer.closeAll();
                },800);
            }
        },'json');
    }
    function cancel(){
        parent.layer.closeAll();
    }
    ////////获取权限
    $(".table").on('click','.one_check',function (){
		if($(this).prop('checked')){
			$(this).parents('table').find('input').prop("checked",true);
		}else{
			$(this).parents('table').find('input').prop("checked",false);
		}
    });
	$(".two_check").click(function (){
		if($(this).prop('checked')){
			$(this).parent().parent().parent().find('input').prop("checked",true);
		}else{
			$(this).parent().parent().parent().find('input').prop("checked",false);
		}
    });
	$(".three_check").click(function (){
		if($(this).prop('checked')){
			$(this).parent().parent().find('input').prop("checked",true);
		}else{
			$(this).parent().parent().find('input').prop("checked",false);
		}
    });
</script>
</body>
</html>